<template>
  <m-page>
    <!-- 提现信息录入页 -->
    <m-header title="提现信息录入"></m-header>
    <div class="withdraw_information">
      <div class="g-top">
        <ynet-cell-item title="融易通卡信用卡" brief="4345 **** **** 5341">
          <span class="holder" slot="left"></span>
        </ynet-cell-item>
      </div>

      <div class="g-center">
        <ynet-field title="提现金额">
          <ynet-input-item
            ref="input12"
            v-model="paymentAmount"
            type="money"
            placeholder="请输入还款金额"
            size="middle"
            clearable
          >
            <span slot="brief" v-if="paymentAmount<=8000">可用额度8，000.00</span>
            <span slot="brief" v-if="paymentAmount > 8000" class="warning_brief">输入额度超额，最多可提现8000元</span>
            <ynet-icon name="rmb" size="lg" svg slot="left"></ynet-icon>
            <div class="input-operator" slot="right" @click="takeAll()">全部提现</div>
          </ynet-input-item>
        </ynet-field>
      </div>
      <div class="g-bottom">
        <!-- 选择收款账户 -->
        <ynet-field-item
          solid
          title="收款账户"
          :content="accountCardId"
          placeholder="请选择您的收款账户"
          arrow
          @click="cardSelect()"
        />
        <md-selector
          v-model="isCardSelectorShow"
          :data="card_options"
          title="选择银行卡"
          large-radius
          @choose="onCardChoose"
          is-check
        >
          <template slot-scope="{ option, index, selected }">
            <div class="selector-item-body" :class="{selected}">
              <div class="selector-item-left">
                <span class="holder"></span>
              </div>
              <div class="selector-item-content">
                <p class="selector-item-title" v-text="option.text"></p>
                <p class="selector-item-brief" v-text="`${option.describe}`"></p>
              </div>
            </div>
          </template>
        </md-selector>

        <ynet-field-item solid title="收款人" content="李莎莎" addon />
        <div class="u-btn">
          <ynet-button type="warning" @click="repaymentSubmit" v-if="accountCardId !==''&&paymentAmount !== ''">确定</ynet-button>
          <ynet-button type="default" v-else>确定</ynet-button>
        </div>
        <div class="u-txt">
          <p>温馨提示：</p>
          <p>收款账户仅支持本人名下长沙银行借记卡账户。</p>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Selector } from "mand-mobile";
import ynetCellItem from "@components/cell-item/index";
import ynetIcon from "@components/icon/index";
import ynetButton from "@components/button/index";
import ynetInputItem from "@components/input-item/index";
import ynetField from "@components/field/index";
import ynetFieldItem from "@components/field-item/index";
import { NumberKeyboard } from "ynet-mobile";
export default {
  components: {
    ynetCellItem,
    ynetIcon,
    ynetButton,
    ynetInputItem,
    ynetField,
    ynetFieldItem,
    [Selector.name]: Selector
  },
  data() {
    return {
      paymentAmount: "", //提现金额
      accountCardId: "", // 付款账户
      isCardSelectorShow: false, //银行卡选择列表
      card_options: [
        //银行卡列表
        {
          value: "A",
          text: "长沙银行储蓄卡（尾号8876）",
          describe: "可用余额100元"
        },
        {
          value: "B",
          text: "招行借记卡（尾号2345）",
          describe: "单笔金额30万元，每日限额300万元"
        },
        {
          value: "C",
          text: "邮政储蓄卡（尾号7532）",
          describe: "单笔金额30万元，每日限额300万元"
        }
      ]
    };
  },
  methods: {
    //页面跳转
    goto(item, data) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`
      app.api.pushWindow( url ,params )
    },
    // 点击出现银行卡列表
    cardSelect() {
      this.isCardSelectorShow = true;
    },
    //银行卡列表选择事件
    onCardChoose({ text }) {
      this.accountCardId = text;
    },
    //全部取出按钮
    //点击后取出金额为该卡最大可用额度
    takeAll() {
      this.paymentAmount = "8000";
    },
    //确定按钮弹出支付密码
    repaymentSubmit() {
      //1、必输字段合法性校验
      //2、调用原生JSAPI(取款密码控件)
      let data = {
        name: "李莎莎",
        time: "2020-02-10 00:30",
        accountCardId: this.accountCardId,
        paymentAmount: this.paymentAmount
      };
      app.api
        .showPaymentPad({
          title: "请输入融易通卡取款密码",
          subTitle: "",
          randomKey: "6",
          accountCardId: this.accountCardId,
          contents: "信用卡还款",
          money: this.paymentAmount.replace(/,/g, "")
        })
        .then(res => {
          console.log(res);
          // this.encryptSM2BySM4(res.password);
          this.goto("withdraw_result.html", data);
        });
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

